<template>
    <div>
        <nav-bar>
            <template v-slot:default>{{detail.title}}</template>
        </nav-bar>
        <div class="bookbanner">
            <van-image
                    height="auto"
                    width="100%"
                    :src="detail.cover_url">
                <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                </template>
            </van-image>
            <van-card class="bookinfo"
                    :num="detail.stock"
                    :price="detail.price+'.00'"
                    :desc="detail.description"
                    :title="detail.title"
            >
                <template #tags>
                    <van-tag plain type="danger">新书</van-tag>
                    <van-tag plain type="danger">热销</van-tag>
                </template>
                <template #footer>
                    <van-button type="warning" @click="detailaddCart">加入购物车</van-button>
                    <van-button type="danger" @click="GoBuy">购买</van-button>
                </template>
            </van-card>
            <van-tabs v-model="active" class="details">
                <van-tab title="详情">
                    <div class="content" v-html="detail.details"></div>
                </van-tab>
                <van-tab title="评论">
                    <div v-show="detail.comments !== undefined && detail.comments.length > 0"  class="comments">
                        <h3>111111111</h3>
                    </div>
                    <div v-show="detail.content == undefined || detail.comments.length <= 0"  class="comments">
                        <h3>暂无评论数据</h3>
                    </div>

                </van-tab>
                <van-tab title="相关书籍">
                    <GoodsList :goodsShow="like_books"></GoodsList>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    import GoodsList from "../../components/content/Goods/GoodsList";
    import NavBar from "../../components/common/navbar/NavBar";
    import {getgoodsDetail} from "../../network/detail";
    import  {useStore} from 'vuex'
    import {useRoute,useRouter} from 'vue-router'
    import {ref,onMounted,reactive,toRefs} from 'vue'
    import {addCart} from "../../network/cart";
    import {Toast} from 'vant'

    export default {
        name: "Detail",
        data(){
            return {
            }
        },
        components:{
            NavBar,
            GoodsList
        },
        setup(){
            let active = ref(0  );
          const route =useRoute();
          const router=useRouter();
          const store=useStore();
          let id =ref();
          //定义数据模型
          let Book = reactive({
              detail:{},
              like_books:[],

          })
          id.value=route.query.id;
          onMounted(()=>{
              id.value=route.query.id;
              getgoodsDetail(id.value).then(res=>{
                 Book.detail=res.goods;
                  Book.like_books=res.like_goods;
              })

          })
            //购物车按钮
            const detailaddCart = ()=>{
                addCart({goods_id:Book.detail.id,num:1}).then(res=>{
                   if (res.status=='204'||res.status=='201'){
                       Toast.success('添加成功')
                       console.log("添加成功")
                       //设置购物车徽章数量更新
                        store.dispatch('updateCart')
                   }
               })
            }
            //购买按钮
            const GoBuy =()=>{
                   // addCart({goods_id:Book.detail.id,num:1}).then(res=>{
                   //     if (res.status=='201'||res.status=='201'){
                   //         Toast.success('添加成功');
                   //         store.dispatch('updateCart')
                   //         router.push({path:'/shopcart'});
                   //     }
                   // })
                console.log('goumai');
            }
          return{
              id,
              ...toRefs(Book),
              active,
              GoBuy,
              detailaddCart,
          }
        },
    }
</script>

<style scoped lang="scss">
    .bookbanner{
        margin-top: 40px;
    }
    img{
        height: 200px;
    }
    .bookinfo{
        text-align: left;
        .van-cart_title{

            background: #42b983;
        }
    }
    .comments{
        height: 100vh;
        width: 100%;

            h3{
            padding-top: 50px;
        }
    }


</style>